﻿@using System.Globalization
@model CultuRAM.Models.Event
@*@model PagedList.IPagedList<CultuRAM.Models.Event>*@


@using (Ajax.BeginForm("Create", "Event", new AjaxOptions
{
    UpdateTargetId = "tabEventGeral",
    InsertionMode = InsertionMode.Replace,
    HttpMethod = "POST",
}, new { id = "formCreateEvent" }))
{
    
    <table style="width: 100%; border: 0; border-color: #000000; border-style: solid; margin: 0;">
        <tr style="width: 70%">
            <!-- LEFT SIDE -->
            <td style="vertical-align: top">
                
                @Html.HiddenFor(model => model.EventId)
@*              @Html.HiddenFor(model => model.EventType)
                @Html.HiddenFor(model => model.Entity)
                @Html.HiddenFor(model => model.Entity.Responsible)
                @Html.HiddenFor(model => model.Entity.ResponsibleContact)
                @Html.HiddenFor(model => model.Entity.Name)*@
                <table>
                    <tr class="control-group">
                        <td>
                            <div>@Html.LabelFor(model => model.Title)</div>
                        </td>
                        <td>
                            <div class="controls">
                                @*@Html.EditorFor(model => model.Title)*@
                                @Html.TextBoxFor(model => model.Title, new { @class = "input-xxlarge",  @onfocus="this.value = ''"})
                                @* @Html.ValidationMessageFor(model => model.Title)*@
                            </div>
                        </td>
                    </tr>
                    <tr class="control-group">
                        <td>
                            <div>@Html.LabelFor(model => model.StartDate)</div>
                        </td>
                        <td>
                            <div id="datetimepickerStart" class="controls input-append date">
                                @Html.TextBoxFor(model => model.StartDate, new { @Value = Model.StartDate.ToString("dd/MM/yyyy HH:mm", CultureInfo.InvariantCulture), @style = "width: 125px;" })
                                <span class="add-on">
                                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                </span>
                                @* @Html.ValidationMessageFor(model => model.StartDate)*@
                            </div>
                        </td>

                    </tr>
                    <tr class="control-group">
                        <td>
                            <div>@Html.LabelFor(model => model.EndDate)</div>
                        </td>
                        <td>
                            <div id="datetimepickerEnd" class="controls input-append date">
                                @Html.TextBoxFor(model => model.EndDate, new { @Value = Model.EndDate.ToString("dd/MM/yyyy HH:mm", CultureInfo.InvariantCulture), @style = "width: 125px;" })
                                <span class="add-on">
                                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                </span>
                                @*@Html.ValidationMessageFor(model => model.EndDate)*@
                            </div>
                        </td>
                    </tr>
                    <tr class="control-group">
                        <td>
                            <div>@Html.LabelFor(model => model.Duration)</div>

                        </td>
                        <td>
                            <div class="controls input-append">
                                @Html.TextBoxFor(model => model.Duration, new { @style = "width: 69px" })
                                <span class="add-on">Ex.: 30 min.
                                </span>
                                @* @Html.ValidationMessageFor(model => model.Duration)*@
                            </div>
                        </td>
                    </tr>
                    <tr class="control-group">
                        <td>
                            <div>@Html.LabelFor(model => model.Public)</div>
                        </td>
                        <td>
                            <div class="controls">
                                @Html.EditorFor(model => model.Public)
                                @*@Html.ValidationMessageFor(model => model.Public)*@
                            </div>
                        </td>
                    </tr>
                    <tr class="control-group">
                        <td>
                            <div>@Html.LabelFor(model => model.EventType)  </div>
                        </td>
                        <td>
                            <div class="controls">
                                @Html.DropDownListFor(model => model.EventTypeId, (SelectList)ViewBag.EventTypeIdDdl, "- Selecione -", new { id = "EventTypeId" })
                                @*<button id="editEventTypes" type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#paramModal1" style="margin-bottom: 10px;"><i class="icon-pencil icon-white"></i></button>*@

                                  @*                               
                                 @Html.DropDownList("EventTypeId", (SelectList)ViewBag.EventTypeIdDdl, String.Empty)*@
                                @*@Html.ValidationMessageFor(model => model.EventTypeId)*@

                                @*<button id="addType" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModalAdd"  onclick="javascript: clearField();">A</button>
                                    <button id="editType" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#myModalEdit">E</button>*@
                            </div>
                        </td>
                    </tr>
                    <tr class="control-group">
                        <td>
                            <div>@Html.LabelFor(model => model.Entity)  </div>
                        </td>
                        <td>
                            <div class="controls">
                                @Html.DropDownListFor(model => model.EntityId, (SelectList)ViewBag.EntityIdDdl, "- Selecione -", new { id = "EntityId" })
                                @*<button id="editEntities" type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#paramModal2" style="margin-bottom: 10px;"><i class="icon-pencil icon-white"></i></button>*@

                                @*@Html.DropDownList("EntityId", (SelectList)ViewBag.EntityIdDdl, String.Empty)*@
                                @*@Html.ValidationMessageFor(model => model.EntityId)*@
                            </div>
                        </td>
                    </tr>
                </table>

            </td>
            <!-- RIGHT SIDE -->
            <td style="width: 30%; vertical-align: top">&nbsp;<br />
                <div class="editor-label">@Html.LabelFor(model => model.Poster)</div>
                <div style="width: 240px; height: 200px; border: 1px solid; text-align: center;">
                    <img src="@Model.Poster" id="ImgPoster" alt="Cartaz" style="height: 200px"/><br />
                </div>
                <br />
                <div class="editor-field">
                    @Html.HiddenFor(model => model.Poster)
                </div>
                @*<input id="bannerImage" name="bannerImage" type="file" class=""><br/>*@

                <div style="position: relative;">
                    <a class='btn btn-sm' href='javascript:;' style="width: 105px;"><i class="icon-search"></i><span id="lblBtnSearch">&nbsp;Procurar</span>
                        <input type="file" class="BtnInputFile" id="bannerImage" style="width: 105px;" name="bannerImage" onchange='$("#upload-file-info").html($(this).val());'>
                    </a>
                    &nbsp;
                    @*<span class='label label-info' id="upload-file-info" style="height:24px; position:relative; top:-4px; left: -5px;"> Selecione um ficheiro... &nbsp;</span>*@

                    <button type="button" id="Add" value="Add" class="btn btn-success btn-sm" onclick="javascript: uploadFile();"><i class="icon-plus icon-white"></i></button>
                    <button type="button" id="Del" value="Del" class="btn btn-danger btn-sm" onclick="javascript: deleteFile();"><i class="icon-remove icon-white"></i></button>
                </div>

            </td>
        </tr>
        <tr>
            <td>
                <br />@*<button type="submit" value="Save" class="btn btn-primary">Guardar</button>*@
            </td>
            <td></td>
        </tr>
    </table>
}




<!-- Modal -->
<div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Adicionar um novo Tipo de Evento</h4>
            </div>
            <div class="modal-body">
                @*  @Html.Action("AddEventTypePv")*@
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<!-- Modal -->
<div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel1">Editar o Tipo de Evento</h4>
            </div>
            <div class="modal-body">
                @* @Html.Action("EditEventTypePv")*@
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->


<script type="text/javascript">
    //$('#txtTitle').on('click', function() {
    //    var titleValCheck = $.trim( $('#txtTitle').val() );  
    //    alert("clicou");
    //    if (titleValCheck == "Sem Título...") {
    //        alert("titulo e igual");
    //        $('#txtTitle').text(""); 
    //    }
    //});

    //Upload Poster Image File
    function uploadFile() {
        var bannerImage = $("#bannerImage").val();

        if (bannerImage) {
            var file = document.getElementById('bannerImage').files[0];
            var formData = new FormData();
            formData.append(file.name, file);
            formData.append("eventId", @(Model.EventId));
            
            var xhr = new XMLHttpRequest();
            var url = "@Url.Action("UpdatePosterImage", "Event")";
            xhr.open('POST', url, true);
            xhr.onload = function(e) {
                var response = $.parseJSON(e.target.response);
                $("#ImgPoster").attr("src", response.path);
                $("#Poster").attr("value",response.path);
            };

            xhr.send(formData); // multipart/form-data

        } else {
            //alert("Nenhum ficheiro encontrado!");
            bootbox.alert("Nenhum ficheiro encontrado!", function() {
                console.log("Alert Callback");
            });
        }
    }
    
    //Delete Poster Image File
    function deleteFile() {

        var formData = new FormData();
        formData.append("EventId", @(Model.EventId));
            
        var xhr = new XMLHttpRequest();
        var url = "@Url.Action("DeletePosterImage", "Event")";
        xhr.open('POST', url, true);
        xhr.onload = function (e) {
            var response = $.parseJSON(e.target.response);
            $("#ImgPoster").attr("src",response.path);
            $("#Poster").attr("value",response.path);
            $("#bannerImage").attr({ value: '' }); 
        };

        xhr.send(formData);  // multipart/form-data

    }
    
    //function clearField() {
    //    $("#Type").attr("value", "");
    //    $("#SuperTypeId1").prepend("<option value=''>Selecione um tipo</option>");
    //    $("#SuperTypeId1 :first-child").attr("selected", true);
    //}
    
</script>


@*@section Scripts {
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/culturam")
}*@